<template>
	<view class="form-date-box">
		<!-- 标题 -->
		<text class="form-text">{{title}}</text>
		<!-- 日期选择 -->
		<view class="form-date-box">
			<view class="form-date-item" @tap="showSelectStartDate">
				<input class="form-date-item-input" type="text" placeholder="开始日期"
					placeholder-style="font-size: 28rpx;" :value="type == '1' ? formStore.busRegStartDt : formStore.certStartTime " />
			</view>
			<text>-</text>
			<view class="form-date-item" @tap="showSelectEndDate">
				<input class="form-date-item-input" type="text" placeholder="结束日期"
					placeholder-style="font-size: 28rpx;" :value="type == '1' ? formStore.busRegEndDt : formStore.certEndTime" />
			</view>
		</view>
		<!-- 单选组件 -->
		<xh-radio class="radio" :title="radioTitle" selectIcon="/static/check_icon_p.png" :isSelect="isSelectLongTime" @change="change"></xh-radio>
		<view class="line"></view>
		<u-datetime-picker v-model="startDate" :show="showCertStartDate" title="选择有效期开始日期" itemHeight="44"
			mode="date" :min-date="31457616000" :max-date="4102366416000" closeOnClickOverlay @close="closeAction" @cancel="closeAction" @confirm="okAction">
		</u-datetime-picker>
		<u-datetime-picker v-model="endDate" :show="showCertEndDate" title="选择有效期结束日期" itemHeight="44"
			mode="date" :min-date="31457616000" :max-date="4102366416000" closeOnClickOverlay @close="closeAction" @cancel="closeAction"
			@confirm="okAction"></u-datetime-picker>
	</view>
</template>

<script setup>
	import { ref,computed } from 'vue'
	import { useFormStore } from '@/stores'
	
	const formStore = useFormStore()
	
	const showCertStartDate = ref(false)
	const showCertEndDate = ref(false)
	const startDate = ref(Date.now())
	const endDate = ref(Date.now())
	//是否选中长期
	const isSelectLongTime = computed(()=>{
		if(props.type == '1'){
			if(formStore.busRegType == '0'){
				return true
			}
			else{
				return false
			}
		}
		else{
			return formStore.isLongTime
		}
	})
	
	const props = defineProps({
		//标题
		title: {
			type: String,
			default: '执照有效期'
		},
		// 单选框标题
		radioTitle: {
			type: String,
			default: '长期'
		},
		// 选择日期组件类型：0：身份证 1：营业执照，默认0
		type: {
			type: String,
			default: '0'
		}
	})
	// 选择开始日期
	const showSelectStartDate = () => {
		showCertStartDate.value = true
	}
	// 选择结束日期
	const showSelectEndDate = () => {
		showCertEndDate.value = true
	}
	// 关闭弹框
	const closeAction = () => {
		showCertStartDate.value = false
		showCertEndDate.value = false
	}
	// 开始日期确认选择
	const okAction = (res) => {
		if(showCertStartDate.value) {
			if(props.type == '1'){
				formStore.busRegStartDt = uni.$u.timeFormat(res.value,'yyyy-mm-dd')
			}
			else{
				formStore.certStartTime = uni.$u.timeFormat(res.value,'yyyy-mm-dd')
			}
		}
		else{
			if(props.type == '1'){
				formStore.busRegEndDt = uni.$u.timeFormat(res.value,'yyyy-mm-dd')
				formStore.busRegType = '1'
			}
			else{
				formStore.certEndTime = uni.$u.timeFormat(res.value,'yyyy-mm-dd')
				formStore.isLongTime = false
			}
		}
		closeAction()
	}
	// 长期选项改变
	const change = ()=>{
		if(props.type == '1'){
			if(formStore.busRegType == '1'){
				formStore.busRegType = '0'
				formStore.busRegEndDt = ''
			}
			else{
				formStore.busRegType = '1'
			}
		}
		else{
			formStore.isLongTime = !formStore.isLongTime
			if (formStore.isLongTime){
				formStore.certEndTime = ''
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.form-date-box {
		position: relative;
		display: flex;
		align-items: center;
		height: 100rpx;
		padding: 0 30rpx;
		background-color: white;
		font-size: 28rpx;

		.line {
			position: absolute;
			left: 30rpx;
			right: 0;
			bottom: 0;
			height: 1px;
			transform: scaleY(0.5);
			background-color: $xh-line-color;
		}

		.form-text {
			flex-shrink: 0;
			min-width: 120rpx;
		}

		.form-date-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.form-date-item {
				text-align: center;
				flex: 1;

				.form-date-item-input {
					pointer-events: none;
					font-size: 28rpx;
				}
			}
		}

		.radio {
			flex-shrink: 0;
		}
	}
</style>